<template>
  <div class="container">
      <div class="closeBtn">
          <span @click="$router.back()" class="iconfont iconicon-test"></span>
      </div>
      <div class="logo">
          <span class="iconfont iconnew"></span>
      </div>
      <div class="inputName">
          <authInput 
          type="text" 
          placeholder="请输入手机号" 
          @input="setUserName"
          rule="^\d{4,16}$"
          err_message="请输入正确的手机号"
          />
      </div>
      <div class="nickName">
          <authInput 
          type="text" 
          placeholder="请输入昵称" 
          @input="setNickName"
          rule="^\w{4,16}$"
          err_message="请输入正确的昵称"
          />
      </div>
      <div class="inputPwd">
          <authInput
          type="password"
          placeholder="请输入密码"
          @input="setPassWord"
          rule="^\d{3,16}$"
          err_message="请输入正确的密码"
          />
      </div>
      <div class="btn">
          <authBtn text="注册" @send="sendRegister"/>
      </div>
      <!-- {{username}}{{userpwd}} -->
  </div>
</template>

<script>
// 引入当个vue单组件
import authInput from '../components/authlnput';
import authBtn from '../components/authBtn'
export default {
  // 注册组件
  components: {
    authInput:authInput,
    authBtn: authBtn
  },
  data(){
    return {
      // 设置默认的值
      username: "",
      userpwd: "",
      nickname: ""
    }
  },
  methods:{
    // 通过触发事件把用户输入用户名的值传给父组件，传过来的值把父组件里面的默认值替换掉
    setUserName(name){
                this.username = name;
            },
            // 通过触发事件把用户输入密码的值传给父组件，传过来的值把父组件里面的默认值替换掉
    setPassWord(pwd){
            this.userpwd = pwd;
            // console.log(pwd)
        },
        // 通过触发事件把用户输入昵称的值传给父组件，传过来的值把父组件里面的默认值替换掉
    setNickName(name){
      this.nickname = name;
    },
     // 点击注册按钮，发送阿贾克斯
    sendRegister(){
      this.$axios({
         // 访问地址
        url: '/register',
        // 发送报文类型
        method: 'POST',
        // 发送数据
        data:{
          username:this.username,
          password:this.userpwd,
          nickname:this.nickname
        }
      })
       //   .then比如就是  success，是服务器响应回来的数据，里面的回调函数res就是服务器响应回来的数据
      .then(res=>{
        if(!res.data.ststatusCode){
          // 注册成功提示
           this.$toast.success(res.data.message)
        }
        // if(res.data.statusCode && res.data.statusCode == 400){
          // 提示用户是否存在
          // this.$toast.fail(res.data.message)
        // }else{
          // 否则注册成功
        //    this.$toast.success(res.data.message)
        // }
       
      })
    }
  }

}
</script>

<style lang="less" scoped>
// 设置样式
  .container{
        padding: 0 5.556vw;
    }
    .closeBtn{
        padding-top: 5.556vw;
        .iconfont{
            font-size: 7.5vw;
        }
    }
    .logo{
        display: flex;
        justify-content: center;
        .iconfont{
            font-size: 35vw;
            color: #d81e06;
        }
    }
    .btn{
        margin-top: 6.667vw;
    }

</style>